<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <button v-if="show" @click="search">搜索</button>
        <!-- 文本框默认没有显示，没有显示就不会在dom中 -->
        <!-- 所以通过$refs是找不到的 -->
        <input v-else ref="txt" type="text">

        <button @click="msg='你好'">修改msg</button>
        <p>{{msg}}</p>
    </div>
    <script src="https://cn.vuejs.org/js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: true,
                msg: 'hello'
            },
            methods: {

                async search () {
                    // 先把show改成false，照理说改成false了， 界面上就应该有input了
                    // 那为什么下面找到的还是undefined？
                    // 原因：因为这里仅仅只是数据发生了改变，dom还没有更新
                    // dom要什么时候更新呢？要等这里的同步代码都执行完了才会去更新
                    // 所以说明dom更新是一个异步操作
                    this.show = false 
                    // 除了显示输入框以外，还要让输入框获得焦点
                    // 所以需要通过ref找到输入框
                    // console.log(this.$refs.txt) // undefined
                    // this.$refs.txt.focus()

                    // 使用$nextTick
                    // 因为$nextTick里面的回调函数会等下一次dom更新就执行
                    // this.$nextTick( () => {
                    //     this.$refs.txt.focus()
                    // } )

                    // 其实$nextTick内部也是Promise封装的，所以也可以用await
                    await this.$nextTick(); // 这里会等待下次dom更新
                    this.$refs.txt.focus()
                }
            },

            // 不推荐把代码写到updated
            // 因为有可能造成性能问题
            updated () {
                // 任何数据发生改变，并且dom更新会调用
                // console.log(this.$refs.txt)
                // this.$refs.txt.focus()
            }
        })
    </script>
</body>
</html>